<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title></title>
    <style>
      html,
      body {
        height: 100%;
        border: 0;
        margin: 0;
      }
      .app-container {
        background: url('images/air_3.jpg') no-repeat center;
        background-size: cover;
        height: 100%;
        z-index: -1;
      }
      .header {
        height: 1rem;
        width: 100%;
        color: white;
        font-size: 28px;
        text-align: center;
        padding-top: 0.1rem;
      }
      .content {
        width: 100%;
        text-align: center;
        margin-bottom: 0.6rem;
      }
      .content .loge {
        height: 0.5rem;
      }
      .content .title {
        color: white;
        font: 0.5rem bold;
        margin-top: -12px;
      }

      .content .data {
        color: white;
        font-size: 14px;
      }
      .content .data img {
        height: 0.6rem;
      }
      .content .aqi {
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 2rem;
      }

      .foot {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 26px;
      }

      .foot img {
        /*padding: 5px;*/
      }

      .box {
        animation: rotate 2s infinite linear;
        -webkit-animation: rotate 2s infinite linear;
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
</head>

<body>
    <div class="app-container">
        <div id="fpointName" class="header">
        </div>
        <div class="content">
          <div class="data" style="display: flex">
            <span style="flex: 1; text-align: right;"><img class="loge" src="images/t.svg" /></span>
            <span id="fwd" style="flex: 1; text-align: left; margin-left: 5px; padding-top: 0.2rem;"></span>
            <span style="flex: 1; text-align: right"><img class="loge" src="images/h.svg" /></span>
            <span id="fsd" style="flex: 1; text-align: center; padding-top: 0.2rem;"></span>
            <span id="fdate" style="flex: 5; text-align: center; padding-top: 0.2rem;">时间</span>
          </div>
          <a href="phonePageChart.html">
            <div id="faqi" class="aqi" style="padding-top: 0.8rem; margin-right: 10px; height: 2rem">
            </div>
          </a>
          <div class="data" style="display: flex">
            <span id="fmoniterPm25" style="flex: 1;text-align: left; margin-left: 25px; padding-top: 0.7rem;"></span>
            <span id="fmoniterCo2" style="flex: 1;text-align: left; padding-top: 0.7rem;"></span>
          </div>
          <div class="data" style="display: flex">
            <span id="fmoniterPm10" style="flex: 1;text-align: left; margin-left: 25px; padding-top: 0.3rem;"></span>
            <span id="fmoniterJq" style="flex: 1;text-align: left; padding-top: 0.3rem;"></span>
          </div>
          <div class="data" style="display: flex">
            <span id="fmoniterYjw" style="flex: 1;text-align: left; margin-left: 25px; padding-top: 0.3rem;"></span>
            <span id="" style="flex: 1;text-align: left; padding-top: 0.3rem;"></span>
          </div>
        </div>
        <div class="foot" style="display: flex;">
          <span style="flex: 2; text-align: right;">
            <img id="boxStatus" src="images/fs.svg" style=" height: 1.6rem;"/>
          </span>
          <span id="statusStr" style="flex: 3; text-align: left; margin-left: 20px; padding-top: 0.7rem"></span>
          <!--<span style="flex: 1; text-align: left; margin-left: 20px;">
            <a href="phonePageChart.html">
                <img src="./images/tb.svg" style=" height: 1rem; padding-top: 0.5rem">
            </a>
          </span>-->
        </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
      <script>
        const faqiStr = {
          1: '优',
          2: '良',
          3: '轻度',
          4: '中度',
          5: '重度',
          6: '严重'
        }
        var boxId = '00088'
        var fpointNo = ''
        $(function () {
          console.log(11)
        })
        window.onload = function() {
            getRem(1000, 100)

          setInterval(function () {
            $("#fdate").text(formartDate(new Date()))
          },1000)

          boxId = getQueryString('boxId')
          getAirData()
          getDeviceStatus()
          sessionStorage.setItem('boxId', boxId)
          setTimeout(function () {
            sessionStorage.setItem('fpointNo', fpointNo)
          },100);
          setInterval(function () {
          // setTimeout(function () {
            getAirData()
            getDeviceStatus()
          },3000)
        };
        window.onresize = function() {
            getRem(1000, 100)
        };

        function formartDate(date0) {
          var date = new Date(date0)
          var ym
          var a = date.getFullYear()
          var b = date.getMonth() + 1
          var c = date.getDate()
          var d = date.getHours()
          var f = date.getMinutes()
          var m = date.getSeconds()
          if (m < 10) {
            m = '0' + m
          }
          if (f < 10) {
            f = '0' + f
          }
          if (d < 10) {
            d = '0' + d
          }
          if (c < 10) {
            c = '0' + c
          }
          if (b < 10) {
            b = '0' + b
          }
          ym = a + '.' + b + '.' + c  + ' ' + d + ':' + f + ':' + m
          return ym
        }

        function getAirData() {
          $.ajax({
            type:'GET',
            url:'http://' + window.location.host + '/phonePage/getAirDataByBoxId2', // 'http://127.0.0.1:8080'  http://139.224.13.75:8082
            data:{boxId},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                $("#fpointName").text(res.data.fpointName);
                $("#fmoniterCo2").html("CO2<br>&nbsp;&nbsp;&nbsp;" + res.data.fmoniterCo2 + ' ug/m3');
                $("#fmoniterJq").html("甲醛<br>&nbsp;&nbsp;&nbsp;" + res.data.fmoniterJq + ' mg/m3');
                $("#fmoniterPm10").html("PM10<br>&nbsp;&nbsp;&nbsp;" + res.data.fmoniterPm10 + ' ug/m3');
                // $("#fmoniterPm102").text('CO2  ' + res.data.fmoniterPm10 + ' ug/m3');
                $("#fmoniterPm25").html("PM2.5<br>&nbsp;&nbsp;&nbsp;" + res.data.fmoniterPm25 + ' ug/m3');
                $("#fmoniterYjw").html("TVOC<br>&nbsp;&nbsp;&nbsp;" + res.data.fmoniterYjw + ' mg/m3');
                $("#fsd").text(res.data.fsd + '%');
                $("#fwd").text(res.data.fwd + '℃');
                $("#faqi").text(faqiStr[res.data.faqi]);
                fpointNo = res.data.fpointNo
              }else{
                console.log(res.msg);
              }
            }
          });
        }

        function getDeviceStatus() {
          $.ajax({
            type:'GET',
            url: 'http://' + window.location.host + '/phonePage/getDeviceStatusByFpointNo', //'http://127.0.0.1:8080'  http://139.224.13.75:8082
            data:{fpointNo},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                var $boxStatus=$('#boxStatus')
                if (res.data) {
                  $boxStatus.addClass('box')
                  $("#statusStr").text('设备运行中...');
                } else {
                  $boxStatus.removeClass('box')
                  $("#statusStr").text('设备待命中');
                }
              }else{
                console.log(res.msg);
              }
            }
          });
        }
        function getQueryString(name) {
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
          var r = window.location.search.substr(1).match(reg);
          if (r != null) {
            return unescape(r[2]);
          }
          return null;
        }
        function getRem(pHeight, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oHeight = document.body.clientHeight || document.documentElement.clientHeight;
            html.style.fontSize = oHeight / pHeight * prem + "px";
        }
    </script>
</body>

</html>
